<!--
 * @Author: your name
 * @Date: 2021-07-26 10:23:43
 * @LastEditTime: 2023-10-20 09:56:17
 * @LastEditors: pmy
 * @Description: 历史轨迹气泡
 * @FilePath: \bdcar-net\src\views\trajectoryMonitor\trajectoryTrack\trackPop.vue
-->
<template>
  <div class="realtimeLocPop" v-if="type == 'car' || type == 'trackPoint'">
    <div class="close-btn" title="关闭" @click="closePop"></div>
    <div v-if="type == 'car'" style="font-size:16px;color:#333;font-weight:600">{{ PopData.numberPlate }}</div>
    <div v-else class="title">{{ PopData.title }}</div>
    <div class="pop-middle">
      <div class="flex-item">
        <span style="color: #878787;">行驶里程</span>
        <span>{{ PopData.totalKm }} km</span>
      </div>
      <div class="flex-item">
        <span style="color: #878787;">速度</span>
        <span>{{ PopData.spd }} km/h</span>
      </div>
      <div class="flex-item">
        <span style="color: #878787;">卫星数</span>
        <span>{{ PopData.satelliteCount }}</span>
      </div>
    </div>
    <div class="normal-item">定位时间：{{ PopData.gpsDateTime }}</div>
    <div class="normal-item">定位位置：{{ PopData.location }}</div>
  </div>
  <div class="realtimeLocPop" v-else>
    <div class="title">{{ PopData.title }}</div>
    <div class="close-btn" title="关闭" @click="closePop"></div>
    <div v-if="type == 'parkPoint'">
      <div class="text">停留位置：{{ PopData.startPlace }}</div>
      <div class="text">停留时长：{{ PopData.interval }}</div>
      <div class="text">开始时间：{{ PopData.startT }}</div>
      <div class="text">结束时间：{{ PopData.endT }}</div>
    </div>
    <div v-else-if="type == 'alarmPoint'">
      <div class="text">报警类型：{{ PopData.alarmTypeName }}</div>
      <div class="text">报警位置：{{ PopData.address }}</div>
      <div class="text">报警时间：{{ PopData.startTime }}</div>
      <div class="text">速度：{{ PopData.spd }} km/h</div>
    </div>
  </div>
</template>
<script lang="ts">
declare const GlobalSetting;
import { ref } from "vue"
export default {
  name: "realtimeLocPop",
  data() {
    const PopData: any = ref({
      companyName: "天空众创",
      gpsDateTime: "2021-07-21 21:00:23",
      location: "武汉市某区某街道56号",
      totalKm: 0,
      numberPlate: "鄂A12345",
      spd: 0,
      vehicleStatus: "行驶",
      satelliteCount: 16,
      imgURL: null,
    });
    const type = ref("car");
    return {
      PopData,
      type
    };
  },
  mounted() {
  },
  methods: {
    getPopData(data, type = "car") {
      this.PopData = Object.assign(data);
      this.type = type
    },
    closePop() {
      this.parent.closePop()
    }
  },
  computed: {
  }
};
</script>
<style scoped lang='scss'>
.realtimeLocPop {
  width: 260px;
  font-size: 14px;
  color: #000;

  .pop-middle {
    display: flex;
    border-bottom: 1px solid #e2e7ec;
    text-align: center;
    margin-top: 10px;
    padding-bottom: 4px;

    .flex-item {
      display: flex;
      flex: 1;
      flex-direction: column;

      >span {
        margin-bottom: 6px;
      }
    }
  }

  .normal-item {
    margin-top: 6px;
  }

  .close-btn {
    background: url("../../../assets/img/map/popClose.png") no-repeat center;
    background-size: 100% 100%;
    height: 16px;
    width: 16px;
    position: absolute;
    top: 15px;
    right: 20px;
    cursor: pointer;
  }

  .pop-top {
    width: 100%;
    display: flex;

    .left {
      width: 172px;
      margin-right: 20px;

      .pop-title {
        font-size: 16px;
        font-weight: 600;
        color: #424242;
        margin-bottom: 10px;
      }

      .car-img {
        width: 100%;
        height: 124px;
      }
    }

    .right {
      flex: 1;

      .inline-name {
        display: inline-block;
      }

      .name {
        color: #afb2be;
        margin-bottom: 6px;
      }

      .item {
        margin-bottom: 6px;
      }

      .divide-line {
        background-color: #e2e7ec;
        height: 1px;
        width: 100%;
        margin-bottom: 6px;
      }
    }
  }
}
</style>